<script setup>
import {ref} from 'vue'

const dialogVisible = ref(false)
const emits = defineEmits(['submit'])
const props = defineProps({
  modalWidth: {
    type: [String,Number],
    default: '500px'
  },
  modalTitle: {
    type: String,
    default: ''
  },
  confirmText: {
    type: String,
    default: '确定'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  draggable: {
    type: Boolean,
    default: true
  },
  appendToBody:{
    type: Boolean,
    default: false
  },
  enableSubmit: {
    type: Boolean,
    default: true
  }
})

const handleOpen = () => dialogVisible.value = true

const handleClose = () => dialogVisible.value = false

const handleSubmit = () => {
  emits('submit')
}

defineExpose({
  handleOpen,
  handleClose
})

</script>

<template>
  <a-modal
      v-model:visible="dialogVisible"
      :title="modalTitle"
      :width="modalWidth"
      :before-close="handleClose"
      :unmount-on-close="true"
      :mask-closable="false"
      :draggable="draggable"
      :render-to-body="appendToBody"
  >
    <slot></slot>
    <template #footer>
      <div class="dialog-footer">
        <a-button @click="dialogVisible = false">{{ cancelText }}</a-button>
        <a-button type="primary" @click="handleSubmit" v-if="enableSubmit" class="ml-12px">
          {{ confirmText }}
        </a-button>
      </div>
    </template>
  </a-modal>
</template>
